<template>
  <div class="login">
    <input type="text" :value="zh" placeholder="请输入帐号" />
    <input type="password" :value="mm" placeholder="请输入密码" />
    <button
      @click="login()"
      :disabled="!check"
      :class="!check ? 'active' : 'cc'"
    >
      登录
    </button>
    <button @click="zhuce()">注册</button>
    <!-- <button @click="zhuce">注册</button> -->
    <div class="shenming">
      <input type="checkbox" :checked="check" @change="check = !check" />
      我已阅读并同意
      <span>《用户隐私政策》</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //帐号密码
      zh: "15555555555",
      mm: "",
      // zh: "18804786208",
      // mm: "123456",
      check: false,
    };
  },
  methods: {
    //简单验证
    login() {
      axios
        .post("http://121.89.205.189:3000/api/user/login", {
          loginname: this.zh,
          password: this.mm,
        })
        .then((res) => {
          if (res.data.code == 200) {
            sessionStorage.setItem("token", res.data.data.token);
            sessionStorage.setItem("userid", res.data.data.userid);
            this.$router.push({ name: "shouye" });
            this.$bus.$emit("chai", {
              name: res.data.data.userid,
            });
          }
        });
    },
    //注册
    zhuce() {
      axios
        .post("http://121.89.205.189:3000/api/user/dofinishregister", {
          tel: "18804786208",
          password: "123456",
        })
        .then((res) => {});
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  height: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  > input {
    width: 3rem;
    height: 0.5rem;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50px;
    margin: 10px 0;
    padding-left: 0.2rem;
  }
  > button {
    width: 3rem;
    height: 0.5rem;
    border: 0;
    background: #fac86c;
    color: #fff;
    border-radius: 50px;
  }
  > .shenming {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 0.55rem;
    > span {
      color: #4ea4fb;
    }
  }
}
.active {
  background: #f5e4c5 !important;
}
</style>